<template>
  <div class="container">
      <ul  v-if="way.length!==0">
          <li v-for="(item,index) in way" :key="index">
                <span class="name"  @click="selected(index)" :class="index === select?'active':''">{{item.name}}</span>
          </li>
      </ul>
      <div class="tab_content">
            <div class="play_list_sort" @click="sort">
                ⇅ 正序/倒序
            </div> 
            <ul v-if="videoResource!=={}">
                <li v-for="(item,index) in contentData || videoResource[0]" :key="index">
                    <router-link @click="refesh(item.id)" :to="item.href" class="desc" >
                        {{item.content}} 
                    </router-link>
                </li>
            </ul>
        </div>
  </div>
</template>

<script>
import { reactive,  toRefs } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
export default {
    props:{
        isplay:{
            type:Boolean,
            defalut:()=>[]
        },
        videoResource:{
            type:Object,
            defalut:()=>{}
        },
        way:{
            type:Array,
            defalut:()=>[]
        }
    },
    setup(props,context){
        const state = reactive({
            isSort:false,
            select:0,
            contentData:[]
        })
        const selected = (index)=>{
            console.log(index);
            state.select = index
            state.contentData =  props.videoResource[state.select]
        }
        onMounted(()=>{
            state.contentData =  props.videoResource[0]
        })
        const sort = ()=>{
            state.contentData =  state.contentData.reverse()
        }
        const  refesh = (id) =>{
            console.log(id);
            context.emit('refesh',id)
        }
        return {
            ...toRefs(state),     
            selected,
            refesh,
            sort
        }
    }
}
</script>

<style lang="less" scoped>
.container{
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            .name{
                padding: 10px 2px;
                color: #999;
                border-radius: 4px 4px 0 0;
            }
            .active{
                color: #fff;
                background-image: linear-gradient(180deg, #BF360C 0%, #333333 100%);
            }
        }
    }
    .tab_content{
        min-height: 150px;
        padding: 20px;
        background: #333;
        box-shadow: 0 2px 8px 0 rgb(0 0 0 / 50%);
        border-radius: 5px;
        .play_list_sort{
            padding-bottom: 10px;
            color: #999;
        }
        ul{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                padding: 0 8px;
                line-height: 36px;
                border-radius: 5px;
                margin-left: 4px;
                margin-top: 10px;
                display: block;
                background: #222;
                text-align: center;
                margin-right: 10px;
                a{
                    color: #999;
                }
            }
        }
    }
}
</style>